<script setup lang="ts">
import Border1 from '@/components/borders/border1.vue'
import Decorator1 from '@/components/decorators/decorator1.vue'
import TrafficLight from '@/components/device/traffic-light.vue'
import PieChart from '@/components/charts/PieChart.vue'
import ElectricityChart from '@/components/charts/ElectricityChart.vue'
import DeviceStatisticalChart from '@/components/charts/DeviceStatisticalChart.vue'
import DeviceFaultChart from '@/components/charts/DeviceFaultChart.vue'
import ProductionChart from '@/components/charts/ProductionChart.vue'
import DeviceAlarmChart from '@/components/charts/DeviceAlarmChart.vue'
</script>

<template>
  <main class="main-content">
    <div class="topNav">
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        "
      >
        <Decorator1 style="font-size: 1vw; color: aliceblue">首页</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">故障排查</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">设备点检</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">设备巡检</Decorator1>
        <Decorator1 style="font-size: 1vw; color: aliceblue">中心ME</Decorator1>
      </div>
      <div class="logContainer">
        <img src="@/assets/svgs/logo_white.svg" width="15%" style="margin-left: 1%" />
      </div>
    </div>
    <div class="mainTitleBox">
      <span class="mainTitleSpan">前工序高速制浆机</span>
    </div>
    <div class="leftBox1">
      <div class="boxTitle">生产质量</div>
      <div class="chartContainer">
        <ProductionChart></ProductionChart>
      </div>
    </div>
    <div class="leftBox2">
      <div class="boxTitle">设备报警</div>
      <div class="chartContainer">
        <DeviceAlarmChart></DeviceAlarmChart>
      </div>
    </div>
    <div class="leftBox3">
      <div class="boxTitle">安全事件</div>
      <div class="chartContainer">
        <PieChart></PieChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
    <div class="centerBox">
      <div class="centerContent">
        <img src="@/assets/img/pulping-machine.png" style="height: 100%" />
      </div>
      <div style="position: absolute; left: 0; top: 0; height: 100%; width: 100%">
        <!-- <el-table
          :data="tableData"
          style="width: 30%; margin-top: 3%; color: aliceblue; margin-left: 1%"
          :show-header="false"
        >
          <el-table-column prop="parameterName" />
          <el-table-column prop="value" />
        </el-table> -->
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 39%;
            top: -0.5%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >料仓</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 52%;
            top: 35%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >循环罐</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 68%;
            top: 70%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >中转罐</Border1
          >
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 25%;
            top: 78%;
          "
        >
          <Border1
            style="
              font-size: 1vw;
              font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
              color: greenyellow;
            "
            >制浆机</Border1
          >
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="bottomBoxTitle">设备故障率</div>
      <div class="chartContainer">
        <DeviceFaultChart></DeviceFaultChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
    <div class="rightBox1">
      <div class="boxTitle">设备状态</div>
      <div class="chartContainer trafficLightRoot">
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备1</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备2</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="red" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备3</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备4</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备5</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="green" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备6</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备7</span>
        </div>
        <div class="trafficLightContainer">
          <TrafficLight color="yellow" class="trafficLight"></TrafficLight>
          <span class="trafficLightTitle">设备8</span>
        </div>
      </div>
    </div>
    <div class="rightBox2">
      <div class="boxTitle">设备统计</div>
      <div class="chartContainer">
        <DeviceStatisticalChart></DeviceStatisticalChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
    <div class="rightBox3">
      <div class="boxTitle">设备能耗</div>
      <div class="chartContainer">
        <ElectricityChart></ElectricityChart>
        <!-- <div style="height: 100%; width: 100%; background-color: red"></div> -->
      </div>
    </div>
  </main>
  <div class="mainBackground"></div>
</template>

<style scoped>
.centerContent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.mainBackground {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/device-template.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.main-content {
  height: 100%;
  width: 100%;
}

.rightBox1 {
  position: absolute;
  margin-left: 76.6%;
  height: 19%;
  width: 21.52%;
  transform: translateY(63.6%);
  /* border: 2px red solid; */
  overflow: hidden;
}

.rightBox2 {
  position: absolute;
  margin-left: 76.6%;
  height: 28%;
  width: 21.52%;
  transform: translateY(120.5%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.rightBox3 {
  position: absolute;
  margin-left: 76.6%;
  height: 33%;
  width: 21.52%;
  transform: translateY(195%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.leftBox1 {
  position: absolute;
  margin-left: 1.9%;
  height: 27.28%;
  width: 21.52%;
  transform: translateY(44.3%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.leftBox2 {
  position: absolute;
  margin-left: 1.9%;
  height: 26%;
  width: 21.52%;
  transform: translateY(160.4%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.leftBox3 {
  position: absolute;
  margin-left: 1.9%;
  height: 27%;
  width: 21.52%;
  transform: translateY(260.4%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.boxTitle {
  margin-left: 11%;
  color: white;
  font-size: 0.86vw;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis; /* 超出容器宽度的部分显示省略号 */
}

.bottomBoxTitle {
  margin-left: 5%;
  color: white;
  font-size: 0.86vw;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis; /* 超出容器宽度的部分显示省略号 */
}

.mainTitleBox {
  position: absolute;
  margin-left: 50%;
  height: 6%;
  width: 12%;
  transform: translateX(-50%) translateY(95%);
  padding-top: 0.25%;
  /* border: 2px red solid; */
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏超出容器宽度的部分 */
  text-overflow: ellipsis; /* 超出容器宽度的部分显示省略号 */
}

.mainTitleBox .mainTitleSpan {
  font-size: 1vw;
  font-family: Arial, sans-serif; /* 选择一个常见的字体作为后备字体 */
  color: aliceblue;
}

.centerBox {
  position: absolute;
  margin-left: 23.4%;
  height: 57.6%;
  width: 53.26%;
  transform: translateY(18%);
  /* border: 2px red solid; */
  overflow: hidden;
}

.bottomBox {
  position: absolute;
  margin-left: 25.15%;
  height: 29.1%;
  width: 48.48%;
  transform: translateY(234%);
  /* border: 2px red solid; */
  overflow: hidden;
  display: flex; /*使用弹性盒子布局*/
  flex-direction: column; /*垂直布局*/
}

.chartContainer {
  height: 100%;
  width: 100%;
  padding: 10px;
  flex: 1;
}

.trafficLightRoot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.trafficLightContainer {
  height: 86%;
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trafficLight {
  height: 100%;
  width: 100%;
  padding: 8%;
}

.trafficLightTitle {
  color: aliceblue;
  font-size: 12px;
  margin-top: 4px;
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.topNav {
  position: absolute;
  height: 8.05%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ulNav {
  list-style-type: none;
  display: flex;
}

.ulNav li {
  margin: 0px 20px;
}

.ulNav li:hover {
  cursor: pointer;
  background-color: #580c96; /* 添加悬停时的背景色 */
}

.ulNav li a {
  text-decoration: none; /* 移除链接的下划线样式 */
  color: inherit; /* 继承父元素的字体颜色 */
}

.ulNav li a:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

.logContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
}
</style>
